<template>
  <div class="relative-container">
    <div v-if="loading" class="skeleton-container">
      <van-skeleton title avatar />
      <van-skeleton title :row="20" />
    </div>
    <div v-else>
      <div class="background"></div>
      <div class="header">
        <div>
          <van-icon name="arrow-left" size="16" @click="goBack" />
        </div>
        <div class="title">店铺详情</div>
        <div class="icons">
          <img
            class="icon"
            src="https://mall.leyifan.com/static/h5/new_images/icon_no_collect.png"
            alt=""
          />
          <img
            class="icon"
            src="https://mall.leyifan.com/static/h5/new_images/store_translate.png"
            alt=""
          />
        </div>
      </div>
      <div class="seller-info">
        <div class="seller-details">
          <img class="seller-avatar" :src="personal" alt="" />
          <div>
            <div class="seller-name">
              <div class="seller-name-text">
                <p>{{ lsfitem?.name }}</p>
                <div class="auth-badge">
                  <img
                    class="auth-icon"
                    src="https://mall.leyifan.com/static/h5/new_images/icon_auth_yes.png"
                    alt=""
                  />
                  <span>已认证</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul class="seller-stats">
          <li class="stat-item">
            <p class="stat-value">{{ lsfitem?.numSellItems }}</p>
            <p class="stat-label">商品:</p>
          </li>
          <li class="stat-item" @click.stop="PingLun()">
            <p class="stat-value good-rating">{{ lsfitem?.ratings?.good }} ></p>
            <p class="stat-label">好评:</p>
          </li>
          <li class="stat-item">
            <p class="stat-value bad-rating">{{ lsfitem?.ratings?.bad }} ></p>
            <p class="stat-label">差评:</p>
          </li>
        </ul>
      </div>
      <div class="seller-description">
        <ul class="description-list">
          <li v-for="(sj, index) in jianli" :key="index" class="description-item">
            {{ sj }}
          </li>
        </ul>
      </div>
      <div class="product-list lsflist">
        <ul class="products">
          <li
            @click="goToListItem(item.id)"
            v-for="(item, index) in xiangqing"
            :key="index"
            class="product-item"
          >
            <img :src="tupian[index]" alt="" class="product-image" />
            <p class="product-name">{{ item?.name }}</p>
            <p class="product-price">{{ item?.price }}日元</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import axios from '@/api/axios'
import { useRoute } from 'vue-router'
import router from '@/router'

let storeId: Ref<any> = ref('')
let personal: Ref<String> = ref('')
let jianli: Ref<string[]> = ref([])
let route = useRoute()
let lsfitem: Ref<any> = ref(null)
let xiangqing = ref()
let tupian: Ref<any> = ref('')
let loading = ref(true)

storeId.value = route.query.id

const goBack = () => {
  router.go(-1)
}
const PingLun = () => {
  router.push({ path: '/pinglun' })
}


const goToListItem = (id: number | string) => {
  router.push({ path: '/listitem', query: { id } })
}

axios
  .get(
    `https://api.mall.leyifan.com/api/front/products/mercari/detailV3?type=normal&url=https%3A%2F%2Fjp.mercari.com%2Fitem%2F${storeId.value}&id=${storeId.value}&itemType=mercari`
  )
  .then((res: any) => {
    console.log(666, res.data.data)
    lsfitem.value = res.data.data?.seller

    let wenxi: string = res.data.data?.seller?.introduction
    let wenxi1 = wenxi.split('\n')
    jianli.value = wenxi1

    let src: string = res.data.data?.seller?.photoUrl
    let src1 = src.replace('https://static.mercdn.net/', 'https://image1.leyifan.cn/mercari-cdn/')
    personal.value = src1
  })
  .finally(() => {
    loading.value = false
  })

axios
  .get(
    `https://api.mall.leyifan.com/api/front/products/mercari/userInfo?userId=617189544&status=on_sale&pageId=`
  )
  .then((res: any) => {
    console.log('longwei', res.data.data?.items)
    xiangqing.value = res.data.data.items
    tupian.value = xiangqing.value.map((o: any) => o.thumbnails[0])

    tupian.value = tupian.value.map((item: any) => {
      return (item = item.replace(
        'https://static.mercdn.net/',
        'https://image1.leyifan.cn/mercari-cdn/'
      ))
    })
    console.log(tupian.value, '11')
  })
  .finally(() => {
    loading.value = false
  })
</script>

<style scoped lang="less">
.relative-container {
  position: relative;
}

.background {
  width: 100vw;
  height: 124rem;
  background-size: cover;
  top: 0;
  left: 0;
  z-index: -1;
  position: absolute;
  background-image: url('https://mall.leyifan.com/static/h5/new_images/common_bg.png');
}

.header {
  padding: 0 14rem;
  height: 42rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 16rem;
    font-weight: 700;
    margin-left: 20rem;
  }

  .icons {
    .icon {
      width: 22rem;
      &:not(:first-child) {
        margin-left: 20rem;
      }
    }
  }
}

.seller-info {
  .seller-details {
    padding: 20rem 14rem;
    display: flex;

    .seller-avatar {
      width: 48rem;
      height: 48rem;
      border-radius: 50%;
    }

    .seller-name {
      display: flex;
      margin-left: 10rem;
      align-items: center;

      .seller-name-text {
        width: 60vw;

        p {
          font-size: 14rem;
        }

        .auth-badge {
          display: inline-block;
          border-radius: 8rem;
          background-color: rgba(37, 203, 149, 0.16);
          color: rgb(37, 203, 149);

          .auth-icon {
            width: 10rem;
          }

          span {
            font-size: 10rem;
          }
        }
      }
    }
  }

  .seller-stats {
    display: flex;
    padding: 0 14rem;
    flex: 1;

    .stat-item {
      flex: 1;
      text-align: center;

      .stat-value {
        font-weight: 700;

        &.good-rating {
          color: red;
        }

        &.bad-rating {
          color: red;
        }
      }

      .stat-label {
        color: #999;
      }
    }
  }
}

.seller-description {
  .description-list {
    background-color: #f5f5f5;
    padding: 14rem 10rem;
    margin: 14rem;
    border-radius: 10rem;

    .description-item {
      font-size: 13rem;
      color: #999;
    }
  }
}

.product-list {
  .products {
    display: flex;
    flex-wrap: wrap;
    padding: 0 14rem;

    .product-item {
      width: 167rem;
      height: 226rem;
      background-color: #f5f5f5;
      border-radius: 10rem;
      margin-bottom: 20rem;
      .product-image {
        width: 167rem;
        height: 167rem;
        border-top-left-radius: 10rem;
        border-top-right-radius: 10rem;
      }

      .product-name {
        font-size: 13rem;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 0 10rem;
      }

      .product-price {
        font-size: 16rem;
        color: red;
        font-weight: 600;
        padding: 0 10rem;
      }
    }
    .product-item:nth-child(2n) {
      margin: 0 0 14rem 13rem;
    }
  }
}

.skeleton-container {
  padding: 20rem 14rem;
}
</style>